<template>
  <div
    ref="main4"
    id="mai4"
    style="width: 450px; height: 220px; margin: auto"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      cyqjList: [],
    };
  },

  mounted() {
    this.drawChart();
  },
  methods: {
    check(val) {
  
      this.cyqjList = val;
      this.drawChart();
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main4);
      //职称结构取数
     
      let that = this;
      var getname = [];
      if (this.cyqjList.getname) {
        getname = this.cyqjList.getname;
      }
      var getvalue = this.cyqjList.getvalue;
      var data = [];
      for (var i = 0; i < getname.length; i++) {
        data.push({
          name: getname[i],
          value: getvalue[i],
        });
      }
      var colorList = ["#86DEDE", "#7DFBC3", "#2A66F6", "#00FCFD"];

      //职称结构图表
      var scale = 1;
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 14,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 14,
          align: "center",
          padding: [15, 10],
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 14,
          padding: [0, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 14,
          align: "center",
          padding: [5, 0],
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      // 指定图表的配置项和数据
      let option = {
        title: {
          show: false,
          text: this.cyqjList.title,
          left: "center",
          top: 0,
          textStyle: {
            color: "#ccc",
          },
        },
        backgroundColor: "",
        tooltip: {
          trigger: "item",
         
        },
        legend: {
          orient: "vertical",
          top: "10",
          left: "5%",
          itemGap: 30,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
          data: getname,
        },
        series: [
          {
            itemStyle: {
              normal: {
                borderColor: "#003786",
                borderWidth: 5,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            type: "pie",
            // silent: true, //取消高亮
            radius: ["30%", "60%"],
            center: ["60%", "40%"],
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              formatter: function (params) {
                var total = 0; //考生总数量
                var percent = 0; //考生占比
                that.cyqjList.getvalue.forEach(function (value, index, array) {
                  total += value;
                });
                percent = ((params.value / total) * 100).toFixed(1);
                // return params.name + percent + "%";
                return (
                  "{white|" +
                  params.name +
                  "}{yellow|" +
                  params.value +
                  "}\n{hr|}\n{blue|" +
                  percent +
                  "%}"
                );
              },
              rich: rich,
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 0,
              lineStyle: {
                color: "#0b5263",
              },
            },

            data: data,
            z: -1,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
